<!DOCTYPE html>
<html>
    <head>
        <title>验证框架</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link type="text/css" rel="stylesheet" href="../style/avalon.doc.css">
        <script src="../avalon.js"></script>

        <script>
            require(["validation/avalon.validation", "dropdown/avalon.dropdown", "ready!"], function () {
                var validationVM

                function showError(el, data) {
                    var next = el.nextSibling
                    if (!(next && next.className === "error-tip")) {
                        next = document.createElement("div")
                        next.className = "error-tip"
                        el.parentNode.appendChild(next)
                    }
                    next.innerHTML = data.getMessage()
                }
                function removeError(el) {
                    var next = el.nextSibling
                    if (next && next.className === "error-tip") {
                        el.parentNode.removeChild(next)
                    }
                }
                avalon.define({
                    $id: "test",
                    $skipArray: ["validation"],
                    g: "1",
                    dropdown: {
                        onHide: function () {//相当于失去焦点
                            var element = this
                            validationVM.data.forEach(function (data) {
                                if (data.element === element) {
                                    validationVM.validate(data, 0, {})
                                }
                            })
                        }
                    },
                    reset: function () {
                        validationVM && validationVM.resetAll()
                    },
                    validation: {
                        onInit: function (v) {
                            validationVM = v
                        },
                        onReset: function (e, data) {
                            data.valueResetor && data.valueResetor()
                            avalon(this).removeClass("error success")
                            removeError(this)
                        },
                        onError: function (reasons) {
                            reasons.forEach(function (reason) {
                                avalon(this).removeClass("success").addClass("error")
                                showError(this, reason)
                            }, this)
                        },
                        onSuccess: function () {
                            avalon(this).removeClass("error").addClass("success")
                            removeError(this)
                        },
                        onValidateAll: function (reasons) {
                            reasons.forEach(function (reason) {
                                avalon(reason.element).removeClass("success").addClass("error")
                                showError(reason.element, reason)
                            })
                            if (reasons.length === 0) {
                                avalon.log("全部验证成功！")
                            }
                        }
                    }
                })
                avalon.scan()
            })
        </script>
    </head>
    <body>
        <form ms-controller="test" ms-widget="validation">
            <h3>验证组件</h3>
            <p><select ms-duplex-phone="g" ms-widget="dropdown,$">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="18600138482">18600138482</option>
                </select></p>
            <button type="submit">submit
            </button>
            <button type="button" ms-click="reset">reset
            </button>
        </form>
    </body>
</html>